<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="ReportQueries">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="值机件资查询" key="1" v-if="permissionStore.hasPermisson('bbcx.zjjzcx')">
                    <div style="height: 100%;">
                        <CheckinInquiry></CheckinInquiry>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="验布件资查询" key="2" v-if="permissionStore.hasPermisson('bbcx.ybjzcx')">
                    <div style="height: 100%;">
                        <ClothInspectionInquiry></ClothInspectionInquiry>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="调机件资查询" key="3" v-if="permissionStore.hasPermisson('bbcx.tjjzcx')">
                    <div style="height: 100%;">
                        <AdjustQuery></AdjustQuery>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="拆纱件资查询" key="4" v-if="permissionStore.hasPermisson('bbcx.csjzcx')">
                    <div style="height: 100%;">
                        <YarnUnwindingInquiry></YarnUnwindingInquiry>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="搬纱件资查询" key="5" v-if="permissionStore.hasPermisson('bbcx.bsjzcx')">
                    <div style="height: 100%;">
                        <YarnMovingInquiry></YarnMovingInquiry>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="乐捐查询" key="6" v-if="permissionStore.hasPermisson('bbcx.ljcx')">
                    <div style="height: 100%;">
                        <DonationEnquiry></DonationEnquiry>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'

export default defineComponent({
    name: 'ReportQueries',
    setup() {

        const pageData = reactive({
            tableIndex: "1"
        })

        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
            if (e === '1') {
                emitter.emit('CheckinInquiry')
            } else if (e === '2') {
                emitter.emit('ClothInspectionInquiry')
            } else if (e === '3') {
                emitter.emit('AdjustQuery')
            } else if (e === '4') {
                emitter.emit('YarnUnwindingInquiry')
            } else if (e === '5') {
                emitter.emit('YarnMovingInquiry')
            } else if (e === '6') {
                emitter.emit('DonationEnquiry')
            }
        }
        const permissionStore = usePermission()
        return {
            pageData,
            tabsChange,
            permissionStore
        }
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>